<template>
  <div>
    <section class="text-center py-12">
      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
        欢迎来到我的博客
      </h1>
      <p class="text-xl text-gray-600 dark:text-gray-400">
        这里分享我的技术心得和组件开发经验
      </p>
    </section>

    <section class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
          最新博客
        </h2>
        <div class="space-y-4">
          <div
            v-if="!posts || posts.length === 0"
            class="text-gray-600 dark:text-gray-400"
          >
            暂无博客文章
          </div>
          <NuxtLink
            v-for="post in posts"
            :key="post.path"
            :to="post.path"
            class="block p-4 hover:bg-gray-50 dark:hover:bg-gray-700 rounded"
          >
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
              {{ post.title }}
            </h3>
            <p class="text-gray-600 dark:text-gray-400">
              {{ post.description }}
            </p>
          </NuxtLink>
        </div>
      </div>

      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
          精选组件
        </h2>
        <div class="space-y-4">
          <NuxtLink
            v-for="component in components"
            :key="component.path"
            :to="component.path"
            class="block p-4 hover:bg-gray-50 dark:hover:bg-gray-700 rounded"
          >
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
              {{ component.name }}
            </h3>
            <p class="text-gray-600 dark:text-gray-400">
              {{ component.description }}
            </p>
          </NuxtLink>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
const { data: posts } = await useAsyncData(() => {
  return queryCollection("blog").all();
});

console.log(posts.value);

const components = [
  {
    name: "Button 按钮",
    path: "/components/button",
    description: "常用的操作按钮组件",
  },
  {
    name: "Card 卡片",
    path: "/components/card",
    description: "用于展示内容的卡片组件",
  },
  {
    name: "Input 输入框",
    path: "/components/input",
    description: "用于用户输入的文本框组件",
  },
];
</script>

<!-- <script setup lang="ts">
const { data: home } = await useAsyncData(() =>
  queryCollection("content").path("/").first()
);

useSeoMeta({
  title: home.value?.title,
  description: home.value?.description,
});
</script>

<template>
  <ContentRenderer v-if="home" :value="home" />
  <div v-else>Home not found</div>
</template> -->
